import {Button, Card, Divider, Grid, Toast} from "antd-mobile";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTicketAlt} from "@fortawesome/free-solid-svg-icons";
import {circleDot, VerticalLine} from "./UtilsComponent";
import dayjs from "dayjs";
import {buyTicket, rmTicket} from "./http/TicketController";

interface TicketProps {
    state: string,
    from: string,
    to: string,
    time: Date | string,
    nums: number,
    price: number,
    id: string|number,
    noId: string,
    passenger: string
}
const TicketCard = (props: TicketProps) => {

    const Title = (
        <div style={{
            display: "flex",
            justifyContent:"space-between",
            alignItems: "center",
            width: "100%"
        }}>
            <h3><FontAwesomeIcon icon={faTicketAlt} />{"  "}汽车票</h3>
        </div>
    );

    return (
        <Card title={Title}
              extra={<span style={{color: "blue"}}>{props.state}</span>}
              headerStyle={{padding: "0 5px"}}
        >
            <Grid columns={2} gap={4}>
                <Grid.Item span={2} style={{
                    fontSize: "1.2rem",
                    fontWeight: "bold"
                }}>
                    {circleDot}{" "}{props.from}
                </Grid.Item>
                <Grid.Item span={2}>{VerticalLine("blue", 25)}</Grid.Item>
                <Grid.Item span={2} style={{
                    fontSize: "1.2rem",
                    fontWeight: "bold"
                }}>
                    {circleDot}{" "}{props.to}
                </Grid.Item>
                <Grid.Item style={{textAlign: "end", color: "orange", fontWeight: "bold", fontSize: "1.5rem"}} span={2}>
                ￥{props.price* props.nums}元
                </Grid.Item>
                <Grid.Item>
                    {dayjs(props.time).format("MM-DD HH:mm")} {" 出发"}
                </Grid.Item>
                <Grid.Item style={{textAlign: "end"}}>
                    车票{props.nums}张
                </Grid.Item>
                <Grid.Item span={2}>
                    <Divider />
                </Grid.Item>
                <Grid.Item style={{
                    display: "flex",
                    justifyContent: "flex-start"
                }} span={2}>
                    <Button color="primary" onClick={async ()=>{
                        await rmTicket(props.id);
                        Toast.show({
                            content:"退票成功"
                        });
                    }} disabled={props.state!=="已购买"} >退票</Button>

                    <Button color="primary" onClick={async ()=>{
                        await buyTicket(props.noId,props.id, props.passenger);
                        Toast.show({
                            content:"购票成功"
                        });
                    }} disabled={props.state!=="已退票"} style={{
                        marginLeft: "1rem"
                    }}>重新购买</Button>
                </Grid.Item>
            </Grid>
        </Card>
    );
}

export default TicketCard;

